<template>
  <div class="container">
    <h2>name: {{ name }} age: {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { isRef, reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !toRef 可以把响应式对象中的某个属性转为单独的响应式的 ref（意味着 JS 中用到时候要加 .value）
    // const name = toRef(obj, 'name')
    // const age = toRef(obj, 'age')
    // toRefs 可以把某个响应式对象中的所有的属性转为单独的响应式的 ref
    // const { name, age, address, sex } = toRefs(obj)
    const updateName = () => {
      obj.name = 'xxx'
    }
    return { ...toRefs(obj), updateName }
  },
}
</script>